<template>
  <div  >

    <quill-editor
        v-model="content"
        ref="myQuillEditor"
        class="editor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
    ></quill-editor>


  </div>
</template>
<script>
// import { addQuillTitle } from "@/js/quill-title.js";
 // 工具栏配置
// const toolbarOptions = [
//   ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
//   ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
//   [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
//   [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
//   [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
//   [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
//   [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
//   [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
//   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
//   [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
//   [{ font: [] }], // 字体种类-----[{ font: [] }]
//   [{ align: [] }], // 对齐方式-----[{ align: [] }]
//   ["clean"], // 清除文本格式-----['clean']
//   ["image"] // 链接、图片、视频-----['link', 'image', 'video']
// ];
 export default {
  name:'vue-quill-editor-demo',
  data() {
    return {
      input: "",
      content: "",
      editorOption: {
        modules: {
          imageDrop: true,
          imageResize: {
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], // 引用，代码块
            [{header: 1}, {header: 2}], // 标题，键值对的形式；1、2表示字体大小
            [{list: "ordered"}, {list: "bullet"}], // 列表
            [{script: "sub"}, {script: "super"}], // 上下标
            [{indent: "-1"}, {indent: "+1"}], // 缩进
            [{direction: "rtl"}], // 文本方向
            [{size: ["small", false, "large", "huge"]}], // 字体大小
            [{header: [1, 2, 3, 4, 5, 6, false]}], // 几级标题
            [{color: []}, {background: []}], // 字体颜色，字体背景颜色
            [{font: []}], // 字体
            [{align: []}], // 对齐方式
            ["clean"], // 清除字体样式
            ["image", "video"] // 上传图片、上传视频
          ]
        },
        theme: "snow"
      },
      html: "",
      tabs: [],
      type: 0,
      isActive: 0
    };
  },
  computed: {
    // editor() {
    //   return this.$refs.quillEditor.quill;
    // }
  },
  methods: {

    onEditorBlur() {
      // 失去焦点事件
      console.log(1);
    },
    onEditorFocus() {
      // 获得焦点事件
      console.log(2);
    },
    onEditorChange() {
      // 内容改变事件
      console.log(this.content);
    }

  },
  mounted() {
    // addQuillTitle();
  },

};
</script>

<style scoped>




.quill-editor {
  margin-top: 20px;
  background-color: #fff;
  height: 650px;
  padding-bottom: 70px;
}




</style>
